<!-- 编辑卖出记录 -->
<template>
  <div class="edit-sell-record">
    <div class="top"></div>
    <div class="content">
      <div>
        <van-popover style="width: 100%" v-model="showPopover" trigger="click" :offset="[45, 0]">
          <div class="select" style="width: 240px; text-align: center; font-size: 18px">
            <div @click="onSelect(i.text)" style="line-height: 40px; border-bottom: 1px solid #eee"
              v-for="i in arealist" :key="i.text">
              {{ i.areaname }}
            </div>
          </div>
          <template #reference>
            <van-field center v-model="form.areaname" :border="true" label="池塘名称：">
              <template #right-icon>
                <img style="width: 15px" src="../../../assets/images/下拉.png" alt="" />
              </template>
            </van-field>
          </template>
        </van-popover>
      </div>
      <div>
        <van-field @click="show3 = true" readonly center type="text" v-model="form.time" label="卖出时间：">
          <template #right-icon>
            <img style="width: 15px" src="../../../assets/images/下拉.png" alt="" />
          </template>
        </van-field>
      </div>
      <div>
        <div class="remark">备注：</div>
        <van-field v-model="form.descs" rows="5" autosize type="textarea" placeholder="请输入备注..." />
      </div>
      <div class="btn">
        <van-button round block type="info" native-type="submit" @click="submit"
          color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))">保存</van-button>

        <van-button round block type="primary" @click="goback()" style="margin-top:30px">返回</van-button>
      </div>
    </div>

    <!-- 时间 -->
    <van-overlay :show="show3" @click="show3 = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="time">{{ time }}</div>
          <van-datetime-picker :show-toolbar="false" ref="picker" v-model="pickertime" confirm-button-text=" "
            cancel-button-text=" " @change="change" type="datetime" />
          <div class="btns">
            <van-button class="cancel" plain type="default" size="small" @click="show3 = false">取消</van-button>
            <van-button class="config" plain type="info" size="small" @click="config">确定</van-button>
          </div>
        </div>
      </div>
    </van-overlay>


  </div>
</template>

<script>
import Bus from '../../../utils/bus.js'
import { patrolAreaInfo, patrolAreaEdit } from "../../../api/patrol_area";
import { areaList } from "../../../api/area";
export default {
  name: "",
  data() {
    return {
      show3: false,
      pickertime: "",
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }],
      time: this.$moment(new Date()).format("YYYY-MM-DD HH:MM:SS"),
      form: {
        name: "",
        time: "",
        remark: "",
      },
      arealist: []
    };
  },
  methods: {
    config() {
      this.form.time = this.time;
      this.show3 = false;
    },
    change(val, value) {
      this.time = this.$moment(this.pickertime).format("YYYY-MM-DD HH:MM:SS");
      console.log(this.time);
    },
    onSelect(action) {
      this.form.name = action;
      this.showPopover = false;
    },
    async getData() {

      let res = await patrolAreaInfo({ id: this.$route.query.id });

      console.log("res", res);
      if (res.status == 200) {
        var form = res.data;
        this.form = form;

      }
    },
    async init() {
      let res = await areaList({ userid: localStorage.getItem("userid") });

      console.log("res", res);
      if (res.status == 200) {
        var arealist = res.data;
        this.arealist = arealist;

      }
    },
    goback() {
      this.$router.back();
    },
    async submit() {


      let res = await patrolAreaEdit(this.form);

      console.log("res", res);
      if (res.status == 200) {

        this.$toast(res.message);
        this.$router.go(-1);


      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.init();
    this.getData();

  },
  mounted() { },
  destroyed() {
    Bus.$emit('chitang', 3);
  },
};
</script>

<style lang="scss">
.edit-sell-record {
  .van-datetime-picker {
    height: 400px;
    overflow: hidden;
  }

  .van-field__label {
    margin-right: 0;
  }

  .van-field__body {
    border: 1px solid #eee !important;
    border-radius: 5px;
    padding-left: 10px;
    padding: 5px;
  }

  .van-field__label>span {
    width: 1rem !important;
    text-align: justify;
    justify-content: space-between;
  }
}
</style>
<style lang="scss" scoped>
.edit-sell-record {
  width: 92%;
  height: calc(100vh - 240px);
  margin: 50px auto 0;
  background-color: #fff;
  position: relative;
  border-radius: 15px;
  padding: 20px;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    margin-top: -200px;
    width: 90%;
    height: 600px;
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .time {
      line-height: 50px;
      font-size: 26px;
      text-align: center;
    }

    .btns {
      margin-top: 20px;
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .cancel,
      .config {
        width: 100px;
      }
    }
  }

  .content {
    .btn {
      width: 50%;
      margin: 20px auto 0;
    }

    .remark {
      font-size: 28px;
      padding: 0 32px;
      color: #646566;
    }
  }

  .top {
    width: 100px;
    height: 50px;
    background-color: #fff;
    position: absolute;
    top: -50px;
    left: 430px;
    transform-origin: left bottom;
    transform: rotate(45deg);
    overflow: hidden;
  }
}
</style>